'use strict'
const path = require('path')
// const Timestamp = new Date().getTime()
const defaultSettings = require('./src/settings.js')
// 压缩代码zip
const CompressionPlugin = require('compression-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const productionGzipExtensions = /\.(js|css)(\?.*)?$/i;
var webpack = require('webpack');

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || '广州圆原元网络科技有限公司' // page title
const Timestamp = new Date().getTime();

// 如果你的端口设置为80,
// 使用管理员权限执行命令行
// 例如，Mac: sudo npm运行
const port = 8080 // dev port

//所有的配置项说明都可以在https://cli.vuejs.org/config/中找到
module.exports = {
  //配置项
  /**
   * 如果您计划在子路径下部署站点，则需要设置publicPath,
   * 例如GitHub页面。如果您计划将站点部署到https://foo.github.io/bar/，
   * 那么publicPath应该设置为“/bar/”。
   * 在大多数情况下，请使用“/”！！！
   * 详细信息：https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'static', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证。
  productionSourceMap: false,
  filenameHashing:true,
  // 文件名哈希
  devServer: {
    port: port, //端口
    open: true, //当open被启用时，dev服务器将自动打开浏览器，弹出页面。
    overlay: { //当出现编译器错误或警告时，在浏览器中显示全屏覆盖。默认情况下禁用。如果只想显示编译器错误
      warnings: false, //如果你想显示警告以及错误:
      errors: true
    },
    // disableHostCheck: true, //使用内网穿透配置
  },

  // 插件配置
  configureWebpack: {
    // 开发环境下
    // externals: {
    //   // 需要使用外部引入的包名：包名
    //   vue: 'Vue', // 注意 vue需要外部引入。放到 echarts前面，防止 console 报错
    //   // echarts: 'echarts',
    //   // 'vue-router': 'VueRouter',
    //   // element: "ElementUI" 可以打包成功，但chunk-vendors.js里面会打包element
    //   'element-ui': 'ELEMENT',
    // },
    // 输出重构 打包编译后的文件名称
    // output: {
    //   filename: `dist/static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
    //   chunkFilename: `dist/static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
    // },
    //在webpack的name字段中提供应用程序的标题，以便
    //可以在index.html中访问它以插入正确的标题。
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [

      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      }),
      // new HtmlWebpackPlugin({
      //   template: resolve( './public/index.html'), // 本地模板的所在的文件路径
      //   hash: true, //是否每次为文件中引入的静态资源如js,css等路径后面加上唯一的hash值，
      //   minify: {
      //     removeComments: true, //是否去除注释
      //   }
      // })

    ]

  },
  // css: {
  //   extract: {
  //     filename: `css/[name].${Timestamp}.css`,
  //     chunkFilename: `css/[name].${Timestamp}.css`
  //   }
  // },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    if (process.env.NODE_ENV === 'production') {
        // 给js和css配置版本号
        config.output.filename('js/[name].js?v='+ Timestamp ).end();
        config.output.chunkFilename('js/[name].js?v='+Timestamp).end();
        config.plugin('extract-css').tap(args => [{
            filename: `css/[name].${Timestamp}.css`,
            chunkFilename: `css/[name].${Timestamp}.css`
        }])
    }

    // 压缩至gzip
    // config.plugin('compressionPlugin')
    //   .use(new CompressionPlugin({
    //     filename: '[path].gz[query]',
    //     algorithm: 'gzip',
    //     test: productionGzipExtensions,
    //     threshold: 10240,
    //     minRatio: 0.8,
    //     deleteOriginalAssets: true
    //   }))
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime`必须与runtimeChunk名称相同。默认值为“runtime”`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // 仅打包最初依赖的第三方
                },
                elementUI: {
                  name: 'chunk-elementUI', // 将elementUI拆分为一个包
                  priority: 20, //重量必须大于libs和app，否则将打包成libs或app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },

                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })

          config.optimization.runtimeChunk('single')
        }
      )
  }
}
